import React, { useEffect, useState } from 'react';
import { displayTra } from '../common/displayTra';
import { useLocation } from 'react-router-dom';

import {
  MailOutlined,
  CameraOutlined,
  PieChartOutlined,
  FileTextOutlined,
  HomeOutlined,
  UserOutlined,
  LogoutOutlined,
} from '@ant-design/icons';
import { useUser } from '../store/hooks/useUser';
import { Menu, Layout } from 'antd';
import { NavLink } from 'react-router-dom';
import { useNotice } from '../store/hooks/useNotice';
const HeaderView = ({ map, LayerClick }) => {
  const location = useLocation();
  const { Header } = Layout;
  const [current, setCurrent] = useState('mail');
  const { permission } = useUser();
  const { username } = useNotice();
  const IsShow = () => {
    if (location.pathname == '/') {
      return false;
    } else return true;
  };

  return (
    <div>
      <Layout className="layout">
        <Header
          style={{
            display: 'flex',
            margin: '0',
            padding: '0',
            height: '10vh',
            boxSizing: 'border-box',
          }}
        >
          <img
            src="https://img.gejiba.com/images/c9cf4c911e6d2aff44ff67a75e1cfe88.png"
            alt=""
            style={{ width: '100px', height: '50px', margin: 'auto 0' }}
          />
          <div
            className="logo"
            style={{
              width: '180px',
              fontSize: '18px',
              height: '31px',
              margin: '16px 24px 16px 0',
              color: 'white',
              textAlign: 'center',
              lineHeight: '31px',
            }}
          >
            光谷智慧交通
          </div>
          <div
            style={{
              width: '180px',
              lineHeight: '9vh',
              color: 'wheat',
            }}
          >
            欢迎您&nbsp;&nbsp; {username}
          </div>

          <Menu
            selectedKeys={[current]}
            theme="dark"
            mode="horizontal"
            style={{ margin: '0 0 0 50px' }}
          >
            <Menu.Item
              key="users"
              icon={<UserOutlined />}
              style={{ padding: '0 15px', fontSize: '17px' }}
              disabled={!permission}
            >
              <NavLink to={'/usersView'}>用户管理</NavLink>
            </Menu.Item>
            <Menu.Item
              key="home"
              icon={<HomeOutlined />}
              style={{ padding: '0 15px', fontSize: '17px' }}
            >
              <NavLink to={'/'}>首页</NavLink>
            </Menu.Item>
            <Menu.Item
              key="event"
              icon={<MailOutlined />}
              style={{ padding: '0 15px', fontSize: '17px' }}
            >
              <NavLink to={'/eventView'}>事件管理</NavLink>
            </Menu.Item>
            <Menu.Item
              key="notice"
              icon={<FileTextOutlined />}
              style={{ padding: '0 15px', fontSize: '17px' }}
            >
              <NavLink to={'/noticeView'}>发布公告</NavLink>
            </Menu.Item>
            <Menu.Item
              key="monitor"
              icon={<CameraOutlined />}
              style={{ padding: '0 15px', fontSize: '17px' }}
            >
              <NavLink to={'/monitorView'}>视频监控</NavLink>
            </Menu.Item>
            <Menu.Item
              key="data"
              icon={<PieChartOutlined />}
              style={{ padding: '0 15px', fontSize: '17px' }}
            >
              <NavLink to={'/dataVis'}>可视化分析</NavLink>
            </Menu.Item>
            <Menu.Item
              key="data"
              icon={<LogoutOutlined />}
              style={{ padding: '0 15px', fontSize: '17px' }}
            >
              <NavLink to={'/login'}>登出</NavLink>
            </Menu.Item>

            <Menu.SubMenu
              disabled={IsShow()}
              title="实时路况"
              style={{
                width: '314px',
                height: '100%',
                textAlign: 'center',
                fontSize: '17px',
                margin: '0',
                padding: '0',
              }}
            >
              <Menu.Item
                key="change"
                style={{
                  width: '280px',
                  height: '150px',
                  margin: '0 0 0 20px',
                }}
              >
                图层切换
                <div>
                  <img
                    onClick={() => {
                      LayerClick(0);
                    }}
                    src="https://img.gejiba.com/images/f5cc22b0fb3980c42f1986db5d65a740.jpg"
                    alt=""
                    style={{
                      width: '80px',
                      height: '80px',
                      margin: '0 20px 0 0',
                    }}
                  />
                  <img
                    onClick={() => {
                      LayerClick(1);
                    }}
                    src="https://img.gejiba.com/images/144596d6d80902319e350b35bcb0422a.jpg"
                    alt=""
                    style={{ width: '80px', height: '80px' }}
                  />
                </div>
              </Menu.Item>
              <Menu.Item
                key="hot"
                style={{
                  height: '150px',
                  margin: '0 20px',
                }}
              >
                热力图
                <img
                  onClick={() => {
                    LayerClick(2);
                  }}
                  src="https://img.gejiba.com/images/9c1151a5400905de83ec9934d3b14f38.jpg"
                  alt=""
                  style={{ width: '80px', height: '80px', display: 'block' }}
                />
                <div id="mapCon"></div>
              </Menu.Item>
              <Menu.Item
                key="ontime"
                style={{
                  height: '150px',
                  margin: '0 20px',
                }}
              >
                实时路况
                <img
                  src="https://img.gejiba.com/images/78f97b33c97e038b5b6db07a1f6cc24f.jpg"
                  alt=""
                  style={{ width: '80px', height: '80px', display: 'block' }}
                  onClick={() => {
                    displayTra(map);
                  }}
                />
              </Menu.Item>
            </Menu.SubMenu>
          </Menu>
        </Header>
      </Layout>
    </div>
  );
};

export default HeaderView;
